﻿@page "/component/input/inputbox"

<Pager DataSource="@(new List<string>(new[]{
                         "Demo","Focus","Loading","State","Icon","Labeled","CorneredLabel","Action","Transparent","Inverted","Fluid","Size"
                     }))">
    <Body>
        <Header1>
            InputBox
            <SubHeader>
                An input is a field used to elicit a response from a user
            </SubHeader>
        </Header1>
        <PresentationPart Title="Demo">
            <RunTemplate>
                <InputBox>
                    <input placeholder="Search"/>
                </InputBox>                
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<InputBox>
    <input placeholder=""Search""/>
</InputBox>     
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Focus">
            <Description>
                An input field can show a user is currently interacting with it
            </Description>
    <RunTemplate>
        <InputBox Focus>
            <input placeholder="Search" />
        </InputBox>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<InputBox Focus>
    <input placeholder=""Search"" />
</InputBox>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Loading">
            <Description>
                An icon input field can show that it is currently loading data
            </Description>
            <RunTemplate>
                <Message State="State.Info">
                    Loading inputs automatically modify the input's icon on loading state to show loading indication
                </Message>
                <InputBox Loading Icon=" HorizontalPosition.Left">
                    <input placeholder="Search" />
                    <Icon IconClass="search" />
                </InputBox>
            </RunTemplate>
                <CodeTemplate>
        @Code.GetCode(@"
```html
<InputBox Loading Icon="" HorizontalPosition.Left"">
    <input placeholder=""Search"" />
    <Icon IconClass=""search""/>
</InputBox>
```
")
    </CodeTemplate>
        </PresentationPart>
                <PresentationPart Title="State">
                    <Description>
                        An input field can show the data contains states
                    </Description>
                    <RunTemplate>
                        <InputBox State="State.Info">
                            <input placeholder="Search" />
                        </InputBox>
                        <InputBox State="State.Success">
                            <input placeholder="Search" />
                        </InputBox>
                        <InputBox State="State.Warning">
                            <input placeholder="Search" />
                        </InputBox>
                        <InputBox State="State.Error">
                            <input placeholder="Search" />
                        </InputBox>
                    </RunTemplate>
                <CodeTemplate>
        @Code.GetCode(@"
```html
<InputBox State=""State.Info"">
    <input placeholder=""Search"" />
</InputBox>
<InputBox State=""State.Success"">
    <input placeholder=""Search"" />
</InputBox>
<InputBox State=""State.Warning"">
    <input placeholder=""Search"" />
</InputBox>
<InputBox State=""State.Error"">
    <input placeholder=""Search"" />
</InputBox>
```
")
    </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Icon">
            <Description>
                An input can be formatted with an icon
            </Description>
    <RunTemplate>
        <InputBox Icon="HorizontalPosition.Left">
            <Icon IconClass="search" />
            <input placeholder="Keyword" />
        </InputBox>
        <br />
        <InputBox Icon="HorizontalPosition.Right">
            <Icon IconClass="search" />
            <input placeholder="Keyword" />
        </InputBox>
        <br />
        <InputBox Icon="HorizontalPosition.Left">
            <Icon IconClass="search" Circular Inverted/>
            <input placeholder="Keyword" />
        </InputBox>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<InputBox Icon=""HorizontalPosition.Left"">
    <Icon IconClass=""search"" />
    <input placeholder=""Keyword""/>
</InputBox>
<br/>
<InputBox Icon=""HorizontalPosition.Right"">
    <Icon IconClass=""search"" />
    <input placeholder=""Keyword""/>
</InputBox>
<br />
<InputBox Icon=""HorizontalPosition.Left"">
    <Icon IconClass=""search"" Circular Inverted/>
    <input placeholder=""Keyword"" />
</InputBox>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Labeled">
            <Description>
                An input can be formatted with a label
            </Description>
    <RunTemplate>
        <InputBox Labeled="HorizontalPosition.Left">
            <Label>http://</Label>
            <input placeholder="site.com" />
        </InputBox>
        <br />
        <br />
        <InputBox Labeled="HorizontalPosition.Right">
            <input />
            <Label Dropdown>
                <Text>.com</Text>
                <Icon IconClass="dropdown" />
                <Menu>
                    <Item>.net</Item>
                    <Item>.io</Item>
                    <Item>.org</Item>
                </Menu>
            </Label>
        </InputBox>
        <br />
        <br />
        <InputBox Labeled="HorizontalPosition.Right">
            <input placeholder="Height" />
            <Label Basic>CM</Label>
        </InputBox>
        <br />
        <br />
        <InputBox Labeled="HorizontalPosition.Right">
            <Label>￥</Label>
            <input placeholder="Price" />
            <Label Basic>.00</Label>
        </InputBox>
        <br />
        <br />
        <InputBox Labeled="HorizontalPosition.Right" Icon="HorizontalPosition.Right">
            <Icon IconClass="tags" />
            <input placeholder="Price" />
            <Label Tag Color="Color.Brown">Tags</Label>
        </InputBox>

    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<InputBox Labeled=""HorizontalPosition.Left"">
    <Label>http://</Label>
    <input placeholder=""site.com"" />
</InputBox>
<br />
<br />
<InputBox Labeled=""HorizontalPosition.Right"">
    <input />
    <Label Dropdown>
        <Text>.com</Text>
        <Icon IconClass=""dropdown"" />
        <Menu>
            <Item>.net</Item>
            <Item>.io</Item>
            <Item>.org</Item>
        </Menu>
    </Label>
</InputBox>
<InputBox Labeled=""HorizontalPosition.Right"">
    <input 身高 />
    <Label Basic>CM</Label>
</InputBox>
<InputBox Labeled=""HorizontalPosition.Right"">
    <Label>￥</Label>
    <input placeholder=""Price"" />
    <Label Basic>.00</Label>
</InputBox>
<InputBox Labeled=""HorizontalPosition.Right"" Icon=""HorizontalPosition.Right"">
    <Icon IconClass=""tags"" />
    <input placeholder=""Price"" />
    <Label Tag Color=""Color.Brown"">Tags</Label>
</InputBox>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="CorneredLabel">
            <RunTemplate>
                <InputBox CorneredLabel="HorizontalPosition.Left">
                    <input placeholder="Name" />
                    <Label Cornered="HorizontalPosition.Left">
                        <Icon Color="Color.Red" IconClass="asterisk" />
                    </Label>
                </InputBox>
                <InputBox CorneredLabel="HorizontalPosition.Right">
                    <input placeholder="Name" />
                    <Label Color="Color.Green" Cornered="HorizontalPosition.Right">
                        <Icon IconClass="asterisk" />
                    </Label>
                </InputBox>
            </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<InputBox CorneredLabel=""HorizontalPosition.Left"">
    <input placeholder=""Name"" />
    <Label Cornered=""HorizontalPosition.Left"">
        <Icon Color=""Color.Red"" IconClass=""asterisk"" />
    </Label>
</InputBox>
<InputBox CorneredLabel=""HorizontalPosition.Right"">
    <input placeholder=""Name"" />
    <Label Color=""Color.Green"" Cornered=""HorizontalPosition.Right"">
        <Icon IconClass=""asterisk"" />
    </Label>
</InputBox>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Action">
            <Description>
                An input can be formatted to alert the user to an action they may perform
            </Description>
            <RunTemplate>
                <InputBox Action="HorizontalPosition.Right">
                    <input placeholder="Keyword..." />
                    <Button>Search</Button>
                </InputBox>
                <br />
                <br />
                <InputBox Action="HorizontalPosition.Left">
                    <Button Color="Color.Blue" IconLabeled="HorizontalPosition.Left">
                        <Icon IconClass="cart" />
                        Cart
                    </Button>
                    <input placeholder="Number" />
                </InputBox>
            </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<InputBox Action=""HorizontalPosition.Right"">
    <input placeholder=""Keyword..."" />
    <Button>Search</Button>
</InputBox>
<br />
<br />
<InputBox Action=""HorizontalPosition.Left"">
    <Button Color=""Color.Blue"" Labeled Icon>
        <Icon IconClass=""cart"" />
        Cart
    </Button>
    <input placeholder=""Number"" />
</InputBox>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Transparent">
            <Description>
                A transparent input has no background
            </Description>
    <RunTemplate>
        <InputBox Transparent>
            <input placeholder="Keyword" />
        </InputBox>
        <br />
        <br />
        <InputBox Transparent Icon="HorizontalPosition.Left">
            <input placeholder="Keyword" />
            <Icon IconClass="search" />
        </InputBox>
        <br />
        <br />
        <InputBox Transparent Icon="HorizontalPosition.Right">
            <input placeholder="Keyword" />
            <Icon IconClass="search" />
        </InputBox>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<InputBox Transparent>
    <input placeholder=""Keyword"" />
</InputBox>
<br />
<br />
<InputBox Transparent Icon=""HorizontalPosition.Left"">
    <input placeholder=""Keyword"" />
    <Icon IconClass=""search"" />
</InputBox>
<br />
<br />
<InputBox Transparent Icon=""HorizontalPosition.Right"">
    <input placeholder=""Keyword"" />
    <Icon IconClass=""search"" />
</InputBox>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Inverted">
            <Description>
                An input can be formatted to appear on dark backgrounds
            </Description>
    <RunTemplate>
        <Segment Inverted>
            <InputBox Inverted>
                <input placeholder="Keyword" />
            </InputBox>
            <br />
            <br />
            <InputBox Inverted Icon="HorizontalPosition.Left">
                <input placeholder="Keyword" />
                <Icon IconClass="search" />
            </InputBox>
            <br />
            <br />
            <InputBox Inverted Icon="HorizontalPosition.Right" Transparent>
                <input placeholder="Keyword" />
                <Icon IconClass="search" />
            </InputBox>
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment Inverted>
    <InputBox Inverted>
        <input placeholder=""Keyword"" />
    </InputBox>
    <br />
    <br />
    <InputBox Inverted Icon>
        <input placeholder=""Keyword"" />
        <Icon IconClass=""search"" />
    </InputBox>
    <br />
    <br />
    <InputBox Inverted Icon=""false"" Transparent>
        <input placeholder=""Keyword"" />
        <Icon IconClass=""search"" />
    </InputBox>
</Segment>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Fluid">
            <Description>
                An input can take the size of its container
            </Description>
    <RunTemplate>
        <InputBox Fluid>
            <input placeholder="Keyword"/>
        </InputBox>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<InputBox Fluid>
    <input placeholder=""Keyword""/>
</InputBox>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Size">
            <Description>
                An input can vary in size
            </Description>
    <RunTemplate>
        <p>
            <InputBox Size="Size.Mini" Icon="HorizontalPosition.Right">
                <input placeholder="Mini" />
                <Icon IconClass="search" />
            </InputBox>
        </p>
        <p>
            <InputBox Size="Size.Tiny" Icon="HorizontalPosition.Right">
                <input placeholder="Tiny" />
                <Icon IconClass="search" />
            </InputBox>
        </p>
        <p>
            <InputBox Size="Size.Small" Icon="HorizontalPosition.Right">
                <input placeholder="Small" />
                <Icon IconClass="search" />
            </InputBox>
        </p>
        <p>
            <InputBox Size="Size.Medium" Icon="HorizontalPosition.Right">
                <input placeholder="Medium" />
                <Icon IconClass="search" />
            </InputBox>
        </p>
        <p>
            <InputBox Size="Size.Large" Icon="HorizontalPosition.Right">
                <input placeholder="Large" />
                <Icon IconClass="search" />
            </InputBox>
        </p>
        <p>
            <InputBox Size="Size.Big" Icon="HorizontalPosition.Right">
                <input placeholder="Big" />
                <Icon IconClass="search" />
            </InputBox>
        </p>
        <p>
            <InputBox Size="Size.Huge" Icon="HorizontalPosition.Right">
                <input placeholder="Huge" />
                <Icon IconClass="search" />
            </InputBox>
        </p>
        <p>
            <InputBox Size="Size.Massive" Icon="HorizontalPosition.Right">
                <input placeholder="Massive" />
                <Icon IconClass="search" />
            </InputBox>
        </p>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<p>
    <InputBox Size=""Size.Mini"" Icon=""HorizontalPosition.Right"">
        <input placeholder=""Mini"" />
        <Icon IconClass=""search"" />
    </InputBox>
</p>
<p>
    <InputBox Size=""Size.Tiny"" Icon=""HorizontalPosition.Right"">
        <input placeholder=""Tiny"" />
        <Icon IconClass=""search"" />
    </InputBox>
</p>
<p>
    <InputBox Size=""Size.Small"" Icon=""HorizontalPosition.Right"">
        <input placeholder=""Small"" />
        <Icon IconClass=""search"" />
    </InputBox>
</p>
<p>
    <InputBox Size=""Size.Medium"" Icon=""HorizontalPosition.Right"">
        <input placeholder=""Medium"" />
        <Icon IconClass=""search"" />
    </InputBox>
</p>
<p>
    <InputBox Size=""Size.Large"" Icon=""HorizontalPosition.Right"">
        <input placeholder=""Large"" />
        <Icon IconClass=""search"" />
    </InputBox>
</p>
<p>
    <InputBox Size=""Size.Big"" Icon=""HorizontalPosition.Right"">
        <input placeholder=""Big"" />
        <Icon IconClass=""search"" />
    </InputBox>
</p>
<p>
    <InputBox Size=""Size.Huge"" Icon=""HorizontalPosition.Right"">
        <input placeholder=""Huge"" />
        <Icon IconClass=""search"" />
    </InputBox>
</p>
<p>
    <InputBox Size=""Size.Massive"" Icon=""HorizontalPosition.Right"">
        <input placeholder=""Massive"" />
        <Icon IconClass=""search"" />
    </InputBox>
</p>
```
")
    </CodeTemplate>
</PresentationPart>
    </Body>
</Pager>